<!-- lklspay 活动卡片 -->
<template>
  <div>
    <a-modal v-model:visible="vdata.visible" width="30%" title="活动介绍" :footer="null" @ok="onClose()">
      <a-row justify="space-between" type="flex">
        <a-col :span="11">
          <a-descriptions>
            <a-descriptions-item label="活动ID">
              {{ vdata.detailData.activityId }}
            </a-descriptions-item>
          </a-descriptions>
        </a-col>
        <a-col :span="11">
          <a-descriptions>
            <a-descriptions-item label="活动名称">
              {{ vdata.detailData.activityName }}
            </a-descriptions-item>
          </a-descriptions>
        </a-col>
        <a-col :span="11">
          <a-descriptions>
            <a-descriptions-item label="是否绑定结算卡">
              {{ vdata.detailData.bankCheck == 'YES' ? '是' : '否' }}
            </a-descriptions-item>
          </a-descriptions>
        </a-col>
        <a-col :span="11">
          <a-descriptions>
            <a-descriptions-item label="是否校验客户经理">
              {{ vdata.detailData.managerCheck == 'YES' ? '是' : '否' }}
            </a-descriptions-item>
          </a-descriptions>
        </a-col>
        <a-col :span="11">
          <a-descriptions>
            <a-descriptions-item label="是否校验服务商直属商户">
              {{ vdata.detailData.directCustomerCheck == 'YES' ? '是' : '否' }}
            </a-descriptions-item>
          </a-descriptions>
        </a-col>
        <a-col :span="11">
          <a-descriptions>
            <a-descriptions-item label="是否展示快捷办卡">
              {{ vdata.detailData.cardPrompt == 'YES' ? '是' : '否' }}
            </a-descriptions-item>
          </a-descriptions>
        </a-col>
        <a-col v-if="vdata.detailData.cardPrompt == 'YES'" :span="24">
          <a-descriptions>
            <a-descriptions-item label="快捷办卡地址">
              {{ vdata.detailData.cardPromptUrl }}
            </a-descriptions-item>
          </a-descriptions>
        </a-col>    
        
        <a-col :span="11">
          <a-descriptions>
            <a-descriptions-item label="补贴模式">
              {{ vdata.detailData.subsidiesMode == 'ADVANCE' ? '垫资模式' : 
                vdata.detailData.subsidiesMode == 'CFRL' ? '先收后返模式' : '未知' }}
            </a-descriptions-item>
          </a-descriptions>
        </a-col>
        <a-col :span="11">
          <a-descriptions>
            <a-descriptions-item label="备注">
              {{ vdata.detailData.comments }}
            </a-descriptions-item>
          </a-descriptions>
        </a-col>
        <a-col :span="11">
          <a-descriptions>
            <a-descriptions-item label="报名开始">
              {{ vdata.detailData.registrationStart }}
            </a-descriptions-item>
          </a-descriptions>
        </a-col>
        <a-col :span="11">
          <a-descriptions>
            <a-descriptions-item label="报名结束">
              {{ vdata.detailData.registrationEnd }}
            </a-descriptions-item>
          </a-descriptions>
        </a-col>
        <a-col :span="11">
          <a-descriptions>
            <a-descriptions-item label="有效期开始">
              {{ vdata.detailData.effectiveStart }}
            </a-descriptions-item>
          </a-descriptions>
        </a-col>
        <a-col :span="11">
          <a-descriptions>
            <a-descriptions-item label="有效期结束">
              {{ vdata.detailData.effectiveEnd }}
            </a-descriptions-item>
          </a-descriptions>
        </a-col>
      </a-row>

      <a-row justify="space-between" type="flex">
        <a-divider orientation="center" style="color: #1A66FF;">账户类型</a-divider>
        <a-col :span="24">
          <!-- 列表渲染 -->
          <a-table
            :data-source="vdata.merAccountTypeList"
            :columns="merAccountTableColumns"
            :pagination="false"
            :loading="vdata.btnLoading"
            :row-key="'merAccountType'"
            :scroll="{ x: 'max-content' }"
            @resize-column=" (w, col) => {col.width = w} "
          >
            <template #bodyCell="{column,record}">
              <template v-if="column.key === 'merAccountType'">
                {{ record }}
              </template>
              <template v-if="column.key === 'merAccountName'">
                <span v-if="record == 'ENTERPRISE'">对公结算账户</span>
                <span v-else-if="record == 'PERSONAL'">对私结算账户</span>
              </template>
            </template>
          </a-table>
        </a-col>
      </a-row>

      <a-row justify="space-between" type="flex">
        <a-divider orientation="center" style="color: #1A66FF;">适用产品</a-divider>
        <a-col :span="24">
          <!-- 列表渲染 -->
          <a-table
            :data-source="vdata.posScopeList"
            :columns="posScopeTableColumns"
            :pagination="false"
            :loading="vdata.btnLoading"
            :row-key="'productNo'"
            :scroll="{ x: 'max-content' }"
            @resize-column=" (w, col) => {col.width = w} "
          >
            <template #bodyCell="{column,record}">
              <template v-if="column.key === 'productNo'">
                {{ record }}
              </template>
              <template v-if="column.key === 'productName'">
                <span v-if="record == 'ALL'">全部</span>
                <span v-else-if="record == 'ZPOS'">电签POS</span>
                <span v-else-if="record == 'BPOS'">传统POS</span>
                <span v-else-if="record == 'ZPOS4G'">4G电签</span>
                <span v-else-if="record == 'SUPER_POS'">智能POS</span>
                <span v-else-if="record == 'B_WIZARD'">蓝精灵</span>
                <span v-else-if="record == 'PAPER_CODE'">码牌</span>
                <span v-else-if="record == 'CREDIT_CARD'">趣伴卡</span>
                <span v-else-if="record == 'WECHAT_PAY'">专业化扫码</span>
                <span v-else-if="record == 'KLYX'">考拉音箱</span>
                <span v-else-if="record == 'QRCODE'">扫码设备</span>
                <span v-else-if="record == 'MONEY_BOX'">收钱宝盒</span>
              </template>
            </template>
          </a-table>
        </a-col>
      </a-row>

      <a-row justify="space-between" type="flex">
        <a-divider orientation="center" style="color: #1A66FF;">活动限制地区</a-divider>
        <a-col :span="24">
          <!-- 列表渲染 -->
          <a-table
            :data-source="vdata.limitCityList"
            :columns="actLimitTableColumns"
            :pagination="false"
            :loading="vdata.btnLoading"
            :row-key="'code'"
            :scroll="{ x: 'max-content' }"
            @resize-column=" (w, col) => {col.width = w} "
          />
        </a-col>
      </a-row>

      <a-row justify="space-between" type="flex">
        <a-divider orientation="center" style="color: #1A66FF;">活动详情</a-divider>
        <a-col :span="24">
          <span v-html="vdata.detailData.details" />
        </a-col>
      </a-row>
    </a-modal>
  </div>
</template>

<script lang="ts" setup>
import {defineProps,reactive} from 'vue'

// 活动限制地区
const actLimitTableColumns = reactive([
  { key: 'code', fixed: 'left', title: '地区码', dataIndex: 'code' },
  { key: 'name', title: '地区名称', dataIndex: 'name' },
])

// 适用产品
const posScopeTableColumns = reactive([
  { key: 'productNo', fixed: 'left', title: '产品类型代码', dataIndex: 'productNo' },
  { key: 'productName', title: '产品名称', dataIndex: 'productName' },
])

// 账户类型
const merAccountTableColumns = reactive([
  { key: 'merAccountType', fixed: 'left', title: '账户类型代码', dataIndex: 'merAccountType' },
  { key: 'merAccountName', title: '账户名称', dataIndex: 'merAccountName' },
])

const vdata:any = reactive({
    btnLoading: false,
    detailData: {}, // 数据对象
    recordId: null, // 更新对象ID
    visible: false, // 是否显示弹层/抽屉
    limitCityList: [], // 活动限制地区列表
    posScopeList: [], // 适用产品列表
    merAccountTypeList: [], // 账户类型列表
})

function show (record) { // 弹层打开事件
    vdata.detailData = record
    vdata.limitCityList = record.regions || []
    vdata.posScopeList = record.posScope || []
    vdata.merAccountTypeList = record.merAccountType || []
    vdata.visible = true
}
function onClose () {
    vdata.visible = false
}
defineExpose({
  show //抛出show函数给父组件
})
</script>
